/**
 * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
 *
 * @see You can view component api by: https://github.com/ant-design/ant-design-pro-layout
 */
import type {
  MenuDataItem,
  BasicLayoutProps as ProLayoutProps,
  Settings,
} from '@ant-design/pro-layout';
import ProLayout, { DefaultFooter, SettingDrawer } from '@ant-design/pro-layout';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import type { Dispatch } from 'umi';
import { Link, useIntl, connect, history } from 'umi';
import { GithubOutlined } from '@ant-design/icons';
import { Result, Button } from 'antd';
import Authorized from '@/utils/Authorized';
import RightContent from '@/components/GlobalHeader/RightContent';
import type { ConnectState } from '@/models/connect';
import { getMatchMenu } from '@umijs/route-utils';
import logo from '../assets/dianqi.png';
import { useHistory } from 'react-router-dom';
const noMatch = (
  <Result
    status={403}
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={
      <Button type="primary">
        <Link to="/User/login">Go Login</Link>
      </Button>
    }
  />
);
export type BasicLayoutProps = {
  breadcrumbNameMap: Record<string, MenuDataItem>;
  route: ProLayoutProps['route'] & {
    authority: string[];
  };
  settings: Settings;
  dispatch: Dispatch;
} & ProLayoutProps;
export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
  breadcrumbNameMap: Record<string, MenuDataItem>;
};
/** Use Authorized check all menu item */

const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] => {
  return menuList.map((item) => {
    const localItem = {
      ...item,
      children: item.children ? menuDataRender(item.children) : undefined,
    };
    return Authorized.check(item.authority, localItem, null) as MenuDataItem;
  });
};
const defaultFooterDom = (
  <DefaultFooter
    copyright={`${new Date().getFullYear()} Produced by Ant Group Experience Technology Department`}
    links={[
      {
        key: '1',
        title: '河北工业大学',
        href: 'https://hebut.edu.cn/',
        blankTarget: true,
      },
      {
        key: '2',
        title: '电气工程学院',
        href: 'https://ee.hebut.edu.cn/',
        blankTarget: true,
      },
    ]}
  />
);
const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
  const history = useHistory();
  const currentUser = localStorage.getItem("token")
  // console.log(props.route.routes);
  const [menuListData, setMenuListData] = useState({
    route: {
      path: '/',
      routes: [],
    },
  });
  const {
    dispatch,
    children,
    settings,
    location = {
      pathname: '/',
    },
  } = props;
  const menuDataRef = useRef<MenuDataItem[]>([]);
  useEffect(() => {
    if (dispatch) {
      dispatch({
        type: 'global/getSysRoutesList',
        payload: {
          data: localStorage.getItem('roleId'),
          callback: (data: any) => {
            const object = {
              route: {
                path: '/',
                routes: data,
              },
            };
            const propsRoutes = props.route.routes;
            //处理图标
            for (let i = 0; i < propsRoutes?.length; i++) {
              for (let j = 0; j < object.route.routes?.length; j++) {
                if (propsRoutes[i].path === object.route.routes[j].path) {
                  object.route.routes[j].icon = propsRoutes[i].icon;
                }
              }
            }
            setMenuListData(object);
          },
        },
      });
    }
  }, []);
  // 在路由跳转前进行判断，如果 token 为空，自动跳转到登录页
  useEffect(() => {
    if (!currentUser) {
      history.push('/user/login');
    }
  }, [currentUser, history]);
  useEffect(() => {

  }, [menuListData]);
  /** Init variables */

  const handleMenuCollapse = (payload: boolean): void => {
    if (dispatch) {
      dispatch({
        type: 'global/changeLayoutCollapsed',
        payload,
      });
    }
  };
  // get children authority
  const authorized = useMemo(
    () =>
      getMatchMenu(location.pathname || '/', menuDataRef.current).pop() || {
        authority: undefined,
      },
    [location.pathname],
  );
  const { formatMessage } = useIntl();
  return (
    <>
      <>
        <ProLayout
          logo={logo}
          formatMessage={formatMessage}
          {...menuListData}
          {...settings}
          onCollapse={handleMenuCollapse}
          onMenuHeaderClick={() => history.push('/')}
          menuItemRender={(menuItemProps, defaultDom) => {
            if (
              menuItemProps.isUrl ||
              !menuItemProps.path ||
              location.pathname === menuItemProps.path
            ) {
              return defaultDom;
            }
            return <Link to={menuItemProps.path}>{defaultDom}</Link>;
          }}
          breadcrumbRender={(routers = []) => [
            {
              path: '/',
              breadcrumbName: formatMessage({
                id: 'menu.home',
              }),
            },
            ...routers,
          ]}
          itemRender={(route, params, routes, paths) => {
            const first = routes.indexOf(route) === 0;
            return first ? (
              <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
            ) : (
              <span>{route.breadcrumbName}</span>
            );
          }}
          footerRender={() => {
            if (settings.footerRender || settings.footerRender === undefined) {
              return defaultFooterDom;
            }
            return null;
          }}
          menuDataRender={menuDataRender}
          rightContentRender={() => <RightContent />}
          postMenuData={(menuData) => {
            menuDataRef.current = menuData || [];
            return menuData || [];
          }}
          waterMarkProps={{
            content: '电气工程学院',
            fontColor: 'rgba(24,144,255,0.15)',
          }}
        >
          <Authorized authority={authorized!.authority} noMatch={noMatch}>
            {children}
          </Authorized>
        </ProLayout>
        <SettingDrawer
          settings={settings}
          onSettingChange={(config) =>
            dispatch({
              type: 'settings/changeSetting',
              payload: config,
            })
          }
        />
      </>
      <SettingDrawer
        settings={settings}
        onSettingChange={(config) =>
          dispatch({
            type: 'settings/changeSetting',
            payload: config,
          })
        }
      />
    </>
  );
};
export default connect(({ global, settings }: ConnectState) => ({
  collapsed: global.collapsed,
  settings,
}))(BasicLayout);
